<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert
        title="提示：必须选择分类才能切换面板"
        center
        type="info"
        show-icon
        style="margin-bottom: 10px"
      >
      </el-alert>
      <!-- 弱类型语言： 在进行运算是会根据实际情况，隐式的转好数据类型
             0 代表 false
             "1"-0
        -->
      <el-steps :active="numberActive" align-center finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品照片"></el-step>
        <el-step title="商品内容"></el-step>
      </el-steps>
      <el-tabs
        :tab-position="tabPosition"
        v-model="active"
        :before-leave="handlerLeave"
        @tab-click="handlerTabClick"
      >
        <el-tab-pane label="基本信息" name="0">
          <el-form :model="goodsForm" ref="gform" label-position="top">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="goodsForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input  v-model="goodsForm.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input  v-model="goodsForm.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input  v-model="goodsForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader
                v-model="goodsForm.goods_cat"
                :options="typeList"
                :props="{
                  expandTrigger: 'hover',
                  value: 'cat_id',
                  label: 'cat_name',
                }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="商品参数" name="1">
          <el-form label-position="top">
            <el-form-item
              :label="item.attr_name"
              v-for="item in manyData"
              :key="item.attr_id"
            >
              <el-checkbox-group v-model="item.attr_vals">
                    <el-checkbox
                      :label="item2"
                      border
                      v-for="(item2, index2) in item.attr_vals"
                      :key="index2"
                      >{{ item2 }}</el-checkbox
                    >
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="商品属性" name="2">
          <el-form>
            <el-form-item :label="item.attr_name" v-for="item in onlyData" :key="item.attr_id">
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="商品图片" name="3">
          <el-upload
            class="upload-demo"
            action="http://shop.zhuox.net/api/private/v1/upload"
            :headers="headerObj"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            list-type="picture"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-tab-pane>

        <el-tab-pane label="商品内容" name="4"> 
            <!-- 
                什么是富文本编辑器？
                    富文本编辑器是一款可以让用户在网页上编辑丰富内容的编辑器
                    作用：
                    用户可以不用懂代码，就可以在页面里创建图片，超链接，视频，还有文本样式
                
                富文本编辑器种类很多，比如：百度编辑器， tinymcs,ckeditor,vue-quill-editor
             -->
             <quill-editor v-model="goodsForm.goods_introduce" :options="{placeholder:'请输入产品介绍内容'}" />
             <el-button type="primary" @click="add">添加商品</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      active: "0",
      tabPosition: "left",
      typeList: [],
      goodsForm: {
        goods_name: "",
        goods_cat: [],
        goods_price: 0,
        goods_number: 0,
        goods_weight: 0,
        goods_introduce: "",
        pics: [],
        attrs: [],
      },
      manyData: [],
      onlyData: [],
      headerObj:{
        Authorization:sessionStorage.getItem("token")
      }
    };
  },
  methods: {
    // 点击添加商品按钮，添加商品
    async add(){
        let copyGoodsForm = JSON.parse(JSON.stringify(this.goodsForm));
        copyGoodsForm.goods_cat = copyGoodsForm.goods_cat.join(",");
        // 因为后端的接口需要所以将用户选择商品 --- 动态参数 --- 所有的 主键 attr_id和参数下面对应的tag值 attr_vals，都处理到this.goodsForm.attrs
        this.manyData.forEach(item=>{
            copyGoodsForm.attrs.push({
                attr_id:item.attr_id,
                attr_value:item.attr_vals.join(" ")
            })
        })

        // 因为后端的接口需要,将用户选择商品的静态参数，都处理到this.goodsForm.attrs
        this.onlyData.forEach(item=>{
            copyGoodsForm.attrs.push(
                {
                    attr_id:item.attr_id,
                    attr_value:item.attr_vals
                }
            )
        })

        // 请求接口，添加商品
        const {data:{meta}} = await this.$http.post("goods",copyGoodsForm);
        console.log(meta);
        if(meta.status !== 201) return this.$message.error('添加商品失败')
        this.$message.success('添加商品成功')
    },
    // 处理删除图片的回调函数
    handleRemove(file,fileList){
        console.log(file,fileList);
        // 1.把客户端删除的图片临时路径取出 file.response.data.tmp_path
        // 2.从pics里找到 file.response.data.tmp_path    对应的哪个数据的索引
        // 3.调用数组的splice方法删除
        const i = this.goodsForm.pics.findIndex(item=>item.pic===file.response.data.tmp_path)
        this.goodsForm.pics.splice(i,1)
    },
    // 处理上传成功的回调函数
    handleSuccess({meta,data:{tmp_path}},file,fileList){
        // 上传接口,如果上传成功，一般都会返回两个路径
        /* 
            "tmp_path": "tmp_uploads/8c781c986ab6b5347a211d59fb8dc74d.jpg",
            "url": "http://127.0.0.1:8866/tmp_uploads/8c781c986ab6b5347a211d59fb8dc74d.jpg"

            tmp_path 要是给添加接口用的
            url 要客户端要展示图片的
        */
        // console.log(response)
        if(meta.status!==200) return this.$message.error('上传图片失败')
        // console.log(tmp_path);
        this.goodsForm.pics.push({pic:tmp_path})
    },
    // 请求三级分类数据
    async getTypeList() {
      let {
        data: { data, meta },
      } = await this.$http.get("categories");
      if (meta.status !== 200) return this.$message.error("获取分类列表失败");
      this.typeList = data;
    },
    // 处理级联选择器的change事件，不能让用户只选一级或二级分类
    handleChange() {
      if (this.goodsForm.goods_cat.length !== 3) {
        this.goodsForm.goods_cat = [];
      }
    },
    // 处理选项卡离开前的事件，如果用户没有在---第一个---卡里 没有选择--三级--的分类，则不让切换
    handlerLeave(activeName, oldActiveName) {
      // activeName 当前要切换的卡的name
      // oldActiveName 之前的卡的name
      // console.log(activeName, oldActiveName);
      // 从第一个选项卡开始切换，但没有选择三级分类久不允许切换
      if (oldActiveName === "0" && this.goodsForm.goods_cat.length !== 3) {
        this.$message.warning("请先选择商品分类");
        return false;
      }
    },
    // 处理选项卡点击事件
    async handlerTabClick() {
      if (this.active === "1") {
        const {
          data: { data, meta },
        } = await this.$http.get(`categories/${this.cateId}/attributes`, {
          params: { sel: "many" },
        });
        if (meta.status !== 200) return this.$message.error("获取动态参数失败");
        data.forEach((item) => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
        });
        this.manyData = data;
      } else if (this.active === "2") {
        const {
          data: { data, meta },
        } = await this.$http.get(`categories/${this.cateId}/attributes`, {
          params: { sel: "only" },
        });
        if (meta.status !== 200) return this.$message.error("获取静态属性失败");
        this.onlyData = data;
      }
    },
  },
  computed: {
    // step的active需要的是number类型，而tab的active需要的是string类型，所以需要转换
    numberActive() {
      return parseInt(this.active);
    },
    cateId() {
      return this.goodsForm.goods_cat[this.goodsForm.goods_cat.length - 1];
    },
  },
  created() {
    this.getTypeList();
  },
};
</script>
<style lang="less">
    // 如果修改的是当前组件下的其他组件的样式，不能用scpoed
    .ql-editor{
        height: 300px !important;
    }
</style>